<template>
  <section class="article-hot" v-if="list.length">
    <h2 class="mb-1 side-title side-title-icon font-mg">
      <slot>{{ title }}</slot>
    </h2>
    <ul class="hot-list">
      <li
        class="hot-item font-m"
        v-for="(item, index) in list"
        :key="item.id"
      >
        <router-link :to="'/news/article?id=' + item.id">
          <p class="hot-item-progroup text-ellipsis">
            <span v-if="item.is_top" class="hot-top">
              <img :src="hotTop" alt="图片" />
            </span>
            <div v-else class="hot-sort font-mg font-bold flex-shrink">{{ item.rank }}</div>
            <div class="text-ellipsis"> {{ item.title }}</div>
          </p>
        </router-link>
      </li>
    </ul>
    <section class="news-aside-more flex-center">
      <buttonVue width="173" height="34" :path="`/news/info`">MORE</buttonVue>
    </section>
  </section>
</template>

<script setup lang="ts">
import hotTop from "@/assets/images/news/hot-top.png";
import buttonVue from "@/components/More.vue";

// const hot = reactive({
//   list: [],
// });

const props = defineProps({
  title: {
    type: String as any,
    default: "" as any,
  },
  list: {
    type: Array as any,
    default: [] as any
  }
});
</script>

<style scoped>
@import "@/assets/css/newsAside.css";
.side-title{
  color:#000;
  padding-left:32px;
}
.hot-item {
  cursor:pointer;
}
.hot-item a{
  display:block;
  color:#626675;
  padding:10px 0;
}
.hot-item a:hover{
  color:#ce2021;
}
.hot-item-progroup{
  /* line-height:20px; */
  display: flex;
  align-items: center;
}
.hot-top,
.hot-sort {
  display: inline-block;
  margin-right:8px;
  width: 24px;
  line-height:24px;
  text-align: center;
  color: #626675;
  vertical-align:middle;
}
.hot-top img {
  display: inline-block;
  vertical-align: middle;
}
.hot-item:nth-child(2) .hot-sort {
  color: #e00000;
}
.hot-item:nth-child(3) .hot-sort {
  color: #ff3600;
}
.hot-item:nth-child(4) .hot-sort {
  color: #ff9100;
}
</style>
